<template>
  <ych-modal
    :fullscreen="false"
    :title="title"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    :cancelText="$t('m.common.button.close')"
  >
    <vxe-toolbar>
      <template #buttons>
        <a-button type="primary" icon="plus" @click="handleAddRow">
          {{ $t('m.common.button.add') }}
        </a-button>
      </template>
    </vxe-toolbar>
    <vxe-table
      header-align="center"
      border
      show-header-overflow
      show-overflow
      :row-config="{isHover: true, keyField: 'id'}"
      :edit-config="{trigger: 'click', mode: 'cell'}"
      :data="dataSource">
      <vxe-column type="seq" :title="$t('m.common.label.number')" width="50" align="center"></vxe-column>
      <vxe-column field="parameterKey" :title="$t('m.eform.appview.entity.parameterKey')" :edit-render="{name: 'input'}" :min-width="120"></vxe-column>
      <vxe-column field="parameterName" :title="$t('m.eform.appview.entity.parameterName')" :edit-render="{name: 'input'}" :min-width="120"></vxe-column>
      <vxe-column v-if="!hiddenOutKey" field="outKey" :title="$t('m.eform.appview.entity.outKey')" :edit-render="{name: 'input'}" :min-width="120"></vxe-column>
      <vxe-column field="defaultValue" :title="$t('m.eform.apptable.entity.colDefaultVal')" :edit-render="{name: 'input'}" :min-width="120"></vxe-column>
      <vxe-column :title="$t('m.common.label.operate')" width="80" align="center">
        <template #default="{ row, rowIndex }">
          <vxe-button type="text" @click="handleRemoveRow(rowIndex)">{{ $t('m.common.button.delete') }}</vxe-button>
        </template>
      </vxe-column>
    </vxe-table>
  </ych-modal>
</template>

<script>

export default {
  name: 'SqlParameterDialog',
  props: {
    hiddenOutKey: Boolean,
  },
  data() {
    return {
      title: this.$t('m.eform.formDesign.label.chu-can-pei-zhi'),
      visible: false,
      dataSource: [],
    }
  },
  methods: {
    open(outParameter) {
      this.dataSource = outParameter ? JSON.parse(outParameter) : []
      this.visible = true
    },
    handleOk() {
      this.$emit('selectFinished', JSON.stringify(this.dataSource))
      this.visible = false
    },
    handleCancel() {
      this.visible = false
    },
    handleAddRow() {
      this.dataSource.push({})
    },
    handleRemoveRow(rowIndex) {
      this.dataSource.splice(rowIndex, 1)
    }
  }
}
</script>
